<template>
  <u-popup
    v-model="show"
    mode="bottom"
    safe-area-inset-bottom
    closeable
    border-radius="16"
  >
    <view class="pop">
      <view class="title">配送评价</view>

      <view class="rate">
        <u-rate
          inactive-icon="star-fill"
          size="100"
          :count="5"
          v-model="star"
          inactive-color="#EFEFEF"
          active-color="#F0250E"
        ></u-rate>
      </view>

      <template v-if="getStarInfo">
        <view class="text">{{ text[star] }}</view>

        <view class="tag">
          <view
            @click="setTag(item.id)"
            :class="['item', tagId.indexOf(item.id) !== -1 ? 'active' : '']"
            v-for="item of getStarInfo"
            :key="item.id"
          >
            {{ item.tag }}</view
          >
        </view>
      </template>

      <view class="btn" @click="submit"><view>匿名提交</view></view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    list: {
      type: Object,
      default() {
        return null;
      }
    },
    orderNo: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      star: undefined,
      show: false,
      tagId: [],
      text: {
        1: "很差",
        2: "差",
        3: "一般",
        4: "较好",
        5: "非常好"
      }
    };
  },

  watch: {
    star: {
      handler() {
        this.tagId = [];
      },
      deep: true
    }
  },

  computed: {
    getStarInfo() {
      if (this.list && this.star) {
        return this.list[this.star];
      }
      return null;
    }
  },

  methods: {
    setTag(id) {
      let { tagId } = this,
        index = tagId.indexOf(id);
      if (index !== -1) {
        tagId.splice(index, 1);
      } else {
        tagId.push(id);
      }
    },

    submit() {
      this.$u.throttle(async () => {
        let { orderNo, star, tagId } = this;

        const res = await this.$allrequest.distribution.orderRiverComment(
          {
            order_no: orderNo,
            star: star,
            tag_ids: tagId.join(",")
          },
          true
        );
        if (!res.code) {
          this.$emit("callback");
          this.show = false;
        }

        this.$utils.toast(res.msg);
      }, 800);
    }
  }
};
</script>

<style lang="scss" scoped>
.pop {
  position: relative;
  padding: 0 36rpx 120rpx;

  .title {
    padding: 26rpx 0;
    font-size: 32rpx;
    color: #262626;
    font-weight: bold;
  }
}

.rate {
  text-align: center;
}

.btn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 2rpx solid #f0f1f3;

  view {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10rpx 36rpx;
    height: 76rpx;
    background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
    border-radius: 32px;
    color: #fff;
    font-size: 26rpx;
  }
}

.text {
  padding: 60rpx 0 48rpx;
  font-size: 36rpx;
  color: #262626;
  font-weight: bold;
  text-align: center;
}

.tag {
  display: flex;
  flex-wrap: wrap;

  view {
    margin: 0 24rpx 24rpx 0;
    padding: 12rpx 24rpx;
    border-radius: 32rpx;
    border: 2rpx solid #efefef;
    font-size: 28rpx;
    color: #262626;

    &.active {
      background: #f0250e;
      color: #fff;
      border-color: #f0250e;
    }
  }
}
</style>
